<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局部注册组件</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
</head>
<body>
    <div id="demo">

    </div>
<script>
    //定义组件对象
    let componentA = {
        data: function () {
            return {msg: 'componentA'}
        },
        template: '<div>{{msg}}</div>'
    };
    //使用组件 对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象
    let vm = new Vue({
        el: '#demo',
        components: { //局部注册为 <component-a/>标签
           'component-a': componentA,
        },
        template: '<component-a/>' //会替换 demo这个div，（或者不写template 在页面中写入<component-a/>标签）
    });
    Vue.use(vm);
</script>
</body>
</html>
